<template>
  <!--  房间管理由楼栋管理改写-->
  <div>
    <h3>设备报警日志</h3>
    <!--    按钮区域-->
    <div class="mainBtn">

      <el-button type="waring" plain size="medium" @click="searchFormVisible=!searchFormVisible"
     round icon="el-icon-search">检索</el-button>
      <!-- 显示列 弹出框 -->
      <el-popover placement="top-start" width="200" trigger="click">
        <el-button
          type="info"
          slot="reference"
          plain
          class="showColumnBtn"
          size="medium"
        >显示列</el-button
        >
        <!-- 显示列的多选框 -->
        <el-checkbox-group
          v-model="checkedColumnList"
          @change="handleCheckedColumnChange"
        >
          <el-checkbox
            v-for="item in tableColumnList"
            :label="item.label"
            :key="item.label"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-popover>
    </div>
    <el-collapse-transition>
      <div v-if="searchFormVisible" class="searchDiv">
        <CommonForm
          :form="searchForm"
          :formLabel="searchLabel"
          :formConfig="searchConfig"
        ></CommonForm>
        <el-button
          type="primary"
          size="mini"
          @click="searchBuilding(searchForm)"
        >搜 索</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="resetData"
        >重 置</el-button
        >
      </div>
    </el-collapse-transition>
    <!--      表格-->
    <div style="height: 400px;">
      <CommonTable v-loading = "loading"  element-loading-text="拼命加载中"
                   :tableData="tableData"
                   :tableLabel="tableLabel"
                   :tableConfig="tableConfig"

                   @handleSelectionChange="handleSelectionChange"
                   @sizeChange="getTableData(1, tableConfig.size, {})"
                   @currentPage="getTableData(tableConfig.page, tableConfig.size, {})"
      >

      </CommonTable>
    </div>
  </div>
</template>

<script>
import CommonManageMain from "components/common/CommonManageMain.vue";
import CommonTable from "components/common/CommonTable.vue";
import CommonForm from "components/common/CommonForm.vue";
import {getErrorLog} from "@/api/equipmentMange/equipiErrorLog";

import 'element-ui/lib/theme-chalk/base.css';

export default {
  name:"equipErrorLog",
  components: {
    CommonManageMain,
    CommonTable,
    CommonForm
  },
  beforeMount() {
    //初始化表格
    this.getTableData(1,this.tableConfig.size,{})
    //初始化 显示列 的数据
    this.tableColumnList = this.tableLabel;
    //获取原始数组label
    this.checkedColumnList = this.tableColumnList.map(item => item.label);
  },
  data(){
    return {

      //获取校区及校区名

      // Search检索
      searchForm: {
        schoolName: "",//	学校名称
        campusName: "",//	校区名称
        buildingName: "",//楼栋名称
        roomNumber:"",//房间号
        equipmentStatus:"",//设备状态，0限制，1使用
        equipmentIdentifier:""//设备ID
      },
      searchLabel:[
        {
          model: "schoolName",
          label: "学校名称",
        },
        {
          model: "campusName",
          label: "校区名称",
        },
        {
          model: "buildingName",
          label: "楼栋名称",
        },
        {
          model: "roomNumber",
          label:"房间号"
        },
        {
          model: 'repaired',
          label:'维修状态',
          type:'select',
          options:[
            {
              label:'待修',
              value:'待修'
            },
            {
              label:'维修中',
              value:'维修中'
            },
            {
              label:'已正常',
              value:'已正常'
            },
          ]
        }
      ],
      searchConfig:
        {
          labelWidth: "80px",
          inline: true,
          labelPosition: "left",
        },
      searchFormVisible:false,
      // Table
      loading: false,//表格载入
      tableData:[

      ],//表格数据
      tableLabel:[
        {
          prop:"schoolName",
          label:"学校名称"
        },
        {
          prop:"campusName",
          label:"校区名称"
        },
        {
          prop:"buildingName",
          label:"楼栋"
        },
        {
          prop: 'roomNumber',
          label: '房间号'
        },
        {
          prop: 'equipmentModel',
          label: '设备型号'
        },
        {
          prop: 'equipmentIdentifier',
          label: '设备ID'
        },
        {
          prop: 'errorCode',
          label: '错误码'
        },
        {
          prop: 'errorDescription',
          label:'错误描述'
        },
        {
          prop: 'reportTime',
          label:'上报时间'
        },
        {
          prop: 'repaired',
          label: '维修状态'
        }
      ],
      tableConfig:{
        isShowLoading:true,
        //当前页
        page:1,
        total:30,
        //单页条目
        size:10,
        //多选
        //行唯一辨识值 跨页
        rowKey:"individualId"
      },
      // tableSelected:[],//表格选中合集
      checkedColumnList: [],// 显示列选中集合
      tableColumnList: [],//列的集合
    }
  },
  provide: function () {
    return {

    }
  },
  watch:{
    // 当 dialog 关闭时 ，重置表单
    'dialogConfig.dialogFormVisible' (newValue) {
      if(!newValue) {
        this.dialogForm = this.$options.data().dialogForm
      }
    }

  },
  methods:{
    //-----------------表格------------------
    //获取数据表格
    getTableData(page,pageSize,datas){
      getErrorLog(page,pageSize,datas).then(res=>{
        let resultData = res.data;
        if (resultData.code == 200){
          this.loading = false
          this.tableData = resultData.data.records;
          const dataList = this.tableData.length;
          this.tableConfig.total = resultData.data.total;
          this.$notify({
            type: 'success',
            message: dataList <1 ? '未查找到相关数据' : '成功获取' + dataList + '条数据'
          })
        }
      }).catch((onerror) => {
        this.$message({
          type:'error',
          showClose: true,
            message:'网络错误，请查看控制台'
        })
        console.log(onerror);
        this.loading = false
      })
    },
    // 显示列 选择事件
    handleCheckedColumnChange() {
      this.tableLabel = this.tableColumnList.filter(columnItem => {
        let isTrue = false;
        for (let checkedcolumnItem of this.checkedColumnList) {
          if (checkedcolumnItem === columnItem.label) {
            isTrue = true;
          }
        }
        return isTrue;
      });
    },
    //table section 表格选中事件
    handleSelectionChange(val){
      this.tableSelected = val
    },

    //---------------检索--------------------
    searchBuilding (searchForm){
      const Data = {};
      for (let i in searchForm) {
        if (searchForm[i] !== "") {
          Data[i] = searchForm[i];
        }
      }
      //参数为空
      if (Object.keys(Data).length===0) {
        return this.$notify({
          type: 'warning',
          message: '查询参数为空'
        })
      }
      getErrorLog(1,this.tableConfig.size,Data).then(res=>{
        let result = res.data
        if (result.success){
          //更新数据
          this.tableData = result.data.records;
          let dataList = result.data.total;
          this.tableConfig.total = result.data.total;
          return this.$notify({
            type: 'success',
            message: dataList <1 ? '未查找到相关数据' : '成功获取' + dataList + '条数据'
          })
        }else {
          return  this.$notify({
            type: 'warning',
            message: '查询失败!'
          })
        }
      }).catch((err)=>{
        console.log(err)
        return  this.$notify({
          type: 'error',
          message: '网络出错，请稍后再试'
        })
      })
    },
    resetData(){
      //重置
      this.searchForm = this.$options.data().searchForm;
    },

    }
}
</script>

<style>
.mainBtn{
  width: 100%;
  position: relative;
  margin: 30px 0 20px;
}
.mainBtn button{
  margin-left:10px;
}
.searchDiv {
  margin: 10px 0;
}
.showColumnBtn {
  position: absolute;
  right: 0;
}
</style>
